<template>
  <div class="container-reader">
    <el-row>
      <!-- 新增/修改弹框 -->
      <el-dialog :title="judgeSta==1?'新增RFID':'修改RFID'"
                 :visible.sync="dialogFormVisible">
        <addAndModifyRFID :todos="todos"
                          :catchBack="catchBack"
                          :catchSave="catchSave"
                          :rfidObj="rfidObj"></addAndModifyRFID>
      </el-dialog>
      <el-form ref="form"
               label-width="80px"
               :model="form">
        <el-col :span="24"
                class="header-box">
          <el-col :span="8"
                  :offset="12">
            <el-form-item label="卡编号">
              <el-input v-model="form.name"
                        placeholder="请输入卡编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  class="header-right">
            <el-form-item>
              <el-button type="primary"
                         @click="onSearch">查询</el-button>
              <el-button type="primary"
                         @click="onAdd">添加</el-button>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-table :data="tableData"
                    :header-cell-style="{background:'#f5f5f5'}"
                    border
                    height="700"
                    style="width: 100%">
            <el-table-column prop="rfid_num"
                             align="center"
                             show-overflow-tooltip
                             label="卡编号"
                             width="180">
            </el-table-column>
            <el-table-column align="center"
                             show-overflow-tooltip
                             label="芯片类型"
                             width="180">
              <template slot-scope="scope">
                <span>{{scope.row.rfid_type=='1'?'有源':'无源'}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="created_at"
                             align="center"
                             show-overflow-tooltip
                             label="创建时间">
            </el-table-column>
            <el-table-column prop="volt"
                             align="center"
                             show-overflow-tooltip
                             label="参数">
            </el-table-column>
            <el-table-column label="操作"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="onEdit( scope.row)">修改</el-button>
                <el-button type="text"
                           @click="onBindRecord( scope.row)">绑定记录</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                class="footer-box">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         background
                         :page-sizes="[10,20,30,40,50,100]"
                         :page-size="pagesize"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import addAndModifyRFID from './components/addAndModifyRFID'
import { RfidApi } from '@/services/SystemSetting'
export default {
  components: {
    addAndModifyRFID
  },
  data () {
    return {
      pagesize: 10,
      total: 0,
      todos: '',
      rfidObj: {},
      currentPage: 1,
      judgeSta: '', // 1：新增；2：修改;判断弹框左上角折内容是新增还是修改
      dialogFormVisible: false,
      form: {
        name: ''
      },
      tableData: []

    }
  },
  methods: {
    catchBack (val) {
      if (val == '0') {
        this.rfidObj = {}
        this.todos = ''
        this.dialogFormVisible = false
      }
    },
    catchSave (val) {
      if (val == 'SUCCESS') {
        this.rfidObj = {}
        this.todos = ''
        this.dialogFormVisible = false
        //页面刷新
        this.getRfidData()
      }
    },
    // 点击“查询”触发的事件
    onSearch () {
      this.currentPage = 1;
      // 获取rfid数据列表
      this.getRfidData()
    },
    // 点击“添加”触发的事件
    onAdd () {
      this.todos = '1'//新增
      this.judgeSta = 1
      this.dialogFormVisible = true
    },
    // 触发“使用记录”事件
    onBindRecord (row) {
      this.$router.push({ path: '/bindRecord', query: { rfid_id: row.rfid_id } })
    },
    // 触发“编辑”事件
    onEdit (row) {
      this.rfidObj = row
      this.todos = '2'//修改
      this.judgeSta = 2
      this.dialogFormVisible = true
    },
    // 第页条数触发事件
    handleSizeChange (val) {
      this.currentPage = 1//默认从第一页开始
      this.pagesize = val//第页显示数据的条数
      this.getRfidData()
    },
    // 点击页码时触发的事件
    handleCurrentChange (val) {
      this.currentPage = val//当前的页数
      this.getRfidData()
      // console.log(`当前页: ${val}`)
    },
    // 获取rfid数据列表
    getRfidData () {
      RfidApi.getRfidData({
        params: {
          rfid_num: this.form.name,
          page: this.currentPage,
          per_page: this.pagesize
        }
      }).then((res) => {
        this.tableData = res.data.data
        this.total = res.data.total
        // console.log('读写器', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    // 获取rfid数据列表
    this.getRfidData()
  }
}
</script>
<style lang="scss" scoped>
.footer-box {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.container-reader {
  padding: 20px;
  height: auto;
}
.header-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.header-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
/deep/ .header-right .el-form-item__content {
  margin-left: 0px !important;
}
</style>
